﻿<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2012.3.1315/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
@*<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.core.min.js")"></script>*@
<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2012.3.1315/kendo.all.min.js")"></script>
<div class="mapContainer" style="margin-top: 20px;">
    <div id="map" style="height:160px;width:250px;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    <p style="text-align: right;margin:0;padding:0 10px 0 0;"><a href="javascript:void(0)" rel="nofollow" onclick="javascript:openMapWindow();">查看详细地图</a></p>
</div>
<div id="mapWindow">
    <div style="height: 100%;">
        <iframe id="mapDetailFrame" src="@Url.Content("~/baidumap.html")" style="height: 100%;width:100%;border:none;"></iframe>
    </div>
</div>
<script type="text/javascript">
    function BaiduMapImageInit() {
        var map = new BMap.Map('map');
        var poi = new BMap.Point(113.585719, 22.278949);
        map.centerAndZoom(poi, 16);
        var marker = new BMap.Marker(poi);
        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        marker.addEventListener("click", function () {
            openMapWindow();
        });
    }

    $(function () {
        BaiduMapImageInit();
        var window = $("#mapWindow");
        var onRefresh = function(e) {
            mapDetailFrame.window.location.reload();
        };
        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                modal: true,
                visible: false,
                actions: ["Refresh", "Close"],
                title: "珠海成信达科技有限公司",
                width: "800px",
                height: "500px",
                resizable: false,
                refresh: onRefresh
            });
        }
        window.data("kendoWindow").center();
    });
    
    function openMapWindow() {
        $("#mapWindow").data("kendoWindow").open();
    }
</script>